<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    /*
    * 在 React 中，可以创建不同的组件来封装各种需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分
    * React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI
    */
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {flag: true}
        }

        render() {
            const {flag} = this.state
            const isLogin = () => {
                return flag ? <h1>准备好了</h1> : <h1>没有准备好</h1>
            }
            /*
            *   1.使用if语句判断
            *   let element = null
            *   if (flag) {element = <h1>准备好了</h1>
            *   } else {element = <h1>没有准备好</h1>}
            *   return element
            *
            *  2.使用三元表达式判断
            *   return flag ? <h1>准备好了</h1> : <h1>没有准备好</h1>
            *
            *  3.封装函数调用函数进行渲染
            *   {isLogin()}
            *
            * 4.使用短路与进行渲染
            *   {flag && <h1>准备好了</h1>}
            */
            return (
                <div>
                    <div>{isLogin()}</div>
                    <div>{flag ? <h1>准备好了</h1> : <h1>没有准备好</h1>}</div>
                    <div>{flag && <h1>准备好了</h1>}</div>
                </div>
            )
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
